<template>
	<view class="card-lists" v-if="props.list.length>0">
		<view :class="setting.coupon.id==item.id?'bg-checked':''" v-for="(item, index) in props.list"
			@click="handleSelect(item)" :key="index" class="boxs-content">
			<view class="flex align-center">
				<view class="image-wrapper margin-right">
					<image src="/static/images/community/icon_coupon.png"></image>
				</view>
				<view class="intro">
					<view class="title text-sigle">{{ item.name }}</view>
					<view class="subtitle margin-top-xs">{{ item.useEndTime }} 前可使用</view>
					<view class="subtitle margin-top-xs">{{ item.description }}</view>
				</view>
				<view class="padding-lr text-center">
					<view class="text-red ">

						<text class="text-bold text-size-14">￥</text>
						<text class="text-bold text-size-32"> {{ item.price }}</text>
					</view>
					<view v-if="item.minPrice==0" class="text-size-12 margin-top-xs">无门槛</view>
					<view v-else class="text-size-12 margin-top-xs">满{{item.minPrice}}元</view>
				</view>
			</view>
			<view class="cu-line"></view>
			<view class="flex justify-content-between padding-tb-xs padding-lr-sm">
				<view class="flex text-left align-center">
					<view class="cuIcon-locationfill text-menu-color"></view>
					<view class="text-size-12 text-bold">{{ item.shopName||"源社区" }}</view>
				</view>
				<view class="">
					<button v-if="setting.coupon.id==item.id" class="cu-btn round bg-menu sm">已选优惠券</button>
					<button v-else class="cu-btn round bg-menu sm">立即使用</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useSettingStore } from '@/stores/index';
	import { onShareAppMessage } from '@dcloudio/uni-app';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		isCard: {
			type: [Boolean, String],
			default: false
		},
		list: {
			default: () => {
				return [{

					"id": "21451763342000142",
					"shopId": "",
					"shopName": null,
					"name": "新人好礼",
					"price": 2.00,
					"limited": false,
					"total": 100,
					"lastTotal": 100,
					"type": 1,
					"minPrice": 0.00,
					"receiveStartTime": "2023-12-06 19:49:55",
					"receiveEndTime": "2023-12-06 19:49:55",
					"fixedTime": true,
					"useStartTime": "2023-12-06 19:49:55",
					"useEndTime": "2023-12-06 19:49:55",
					"sort": 0,
					"enable": true,
					"description": "",
					"createTime": "2023-12-06 19:50:23"

				}]
			}
		}
	});
	const handleSelect = (e : any) => {
		emit('action', e, 0);
	};
	const shareInfo = ref({
		withShareTicket: false,
		title: '邀请您体验小程序',
		content: '源社区吃着更放心',
		imageUrl: '',
		path: '/pages/my/coupondetails',
		success: (res : any) => {

		},
		fail: (res : any) => {

		},
		complete: (res : any) => {

		}
	})
	const handleShare = (item : any) => {
		shareInfo.value = {
			withShareTicket: false,
			title: item.name,
			content: item.shopName,
			imageUrl: '',
			path: '/pages/my/coupondetails?id=' + item.id,
			success: (res : any) => {

			},
			fail: (res : any) => {

			},
			complete: (res : any) => {

			}
		}
		emit('action', item, 1);

	}
	onShareAppMessage((res) => {
		if (res.from === 'button') {// 来自页面内分享按钮
			console.log(res.target)
			//return res.target
		}
		return shareInfo.value
	})
</script>

<style lang="scss">
	.card-lists {
		padding: 10rpx 30rpx;
		background-color: white;

		.boxs-content {
			margin: 20rpx 0;
			border-radius: $border-radius-lg;
			padding: 10rpx 10rpx;
			background-color: $bg-color-white;
			box-shadow: 0px 2px 4px 0px rgba(200, 200, 200, 0.5), 0px 2px 4px 0px rgba(200, 200, 200, 0.5);

			.intro {
				flex: 1;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: left;

				.title {
					font-size: 14px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 20px;
					letter-spacing: 1px;
					width: 8rem;
				}

				.subtitle {
					font-size: 10px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 14px;
				}
			}

			.cu-line {
				opacity: 0.15;
				border: 1px solid #979797;
			}

			.image-wrapper {
				flex: initial;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 180rpx;
					height: 180rpx;
				}
			}
		}

		.boxs-content.bg-checked {
			margin: 20rpx 0;
			border-radius: $border-radius-lg;
			padding: 10rpx 10rpx;
			background-color:rgba(208, 211, 151, 0.5);
			box-shadow: 0px 2px 4px 0px rgba(208, 211, 151, 0.5), 0px 2px 4px 0px rgba(208, 211, 151, 0.5);

			.intro {
				flex: 1;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: left;

				.title {
					font-size: 14px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 20px;
					letter-spacing: 1px;
					width: 8rem;
				}

				.subtitle {
					font-size: 10px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 14px;
				}
			}

			.cu-line {
				opacity: 0.15;
				border: 1px solid #979797;
			}

			.image-wrapper {
				flex: initial;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 180rpx;
					height: 180rpx;
				}
			}

		}
	}
</style>